<template>
<div class="page">
  <div class="login-box">
    <h1 v-if="this.type == 'login'">登录</h1>
    <h1 v-else>注册</h1>
    <div class="line">
      <div class="name">手机</div>
      <div class="input-box phone-box">
        <input type="text" v-model="phone">
        <GetCode :phone="phone"></GetCode>

<!--        <div class="code">-->
<!--          验证码-->
<!--        </div>-->

      </div>
    </div>

    <div class="line">
      <div class="name">验证码</div>
      <div class="input-box"> <input type="text"  v-model="code"> </div>
    </div>
    <hr>
    <div class="reg-line">
      <div></div>

      <div @click="changeType()" v-if="this.type == 'login'">去登录</div>
      <div @click="changeType()" v-else>注册</div>

    </div>


    <div class="btn"  @click="postLogin()" v-if="this.type == 'login'">去登录</div>
    <div class="btn" @click="postReg()" v-else>注册</div>




  </div>

</div>
</template>

<script>
import GetCode from "@/components/GetCode.vue";


export default {
  name: 'Login',
  data: function () {
    return {
      phone:'18888888888',
      code:"",
      type:'login'
    }
  },
  components: {
    GetCode
  },
  methods:{
    changeType(){
     if (this.type === 'login') {
       this.type ='reg'
     } else {
       this.type = 'login'

     }

    },
    postReg(){
      console.log("注册");
    },
    postLogin(){
      console.log(this.phone);
      console.log(this.code);
    }
  },
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
</style>

<style scoped >

.page{
  height: 100vh;
  width: 100vw;
  background: #e4e4e4;
  display: flex;
  justify-content: center;
  align-items: center;
}
h1{
  margin-bottom: 30px;
}

.login-box{
  width: 500px;
  height: 500px;
  padding: 30px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 10px;

}
.line{
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  //justify-content: space-between;
}
.line .name{
  width: 100px;
  margin-right: 30px;
  text-align: right;
  font-size: 18px;

}
.input-box input{
  height: 30px;
  width: 250px;
  outline: none;
  text-indent: 10px;
}

.phone-box{
  display: flex;
}
.phone-box input{
  width: 160px;
}


.btn{
  width: 300px;
  margin: 0 auto;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background:  #42b983;
  border-radius: 10px;

}

.reg-line{
  width: 300px;
  margin: 10px auto 30px auto;
  display: flex;
  justify-content: space-between;
}

</style>
